<template>
  <div class="leave-container">
    <!-- 请假提交申请卡片 标题 -->
    <div class="leave-title">
      <div class="line"></div>
      <div class="leave-detail">最近申请</div>
      <div class="look-btn" v-show="tableData.length > 1">查看全部</div>
    </div>
    <!-- 卡片 主体-->
    <div class="card" v-for="(item, index) in tableData" :key="index">
      <div class="student_avatar">
        <img src="~images/common/student_avatar.png" />
      </div>
      <div class="stu-name">{{ item.staff_name }}</div>
      <div class="stu-gender">{{ item.staff_sex }}</div>
      <div class="tel-icon-container">
        <img class="tel-icon" src="~images/common/stu_tel.png" />
      </div>
      <div class="stu-tel">18649007205</div>
      <div class="stu-dormitory">{{ item.dormitory	}}</div>
      <div class="stu-class">{{ item.college }}</div>
      <div class="stu-appli-icon">
        <img  src="~images/common/confirm_active.png" />
      </div>
      <div class="stu-appli">申请</div>
      <div class="stu-appli-time">{{ item.start_time | formateTime}} ~ {{ item.end_time | formateTime }}</div>
      <div class="sub-time">{{ item.created_at | formateTime}} 提交</div>
      <div class="leave-res">节假日回家</div>
      <div class="handler-even-icon">
        <img  src="~images/common/confirm.png" />
      </div>
      <ul class="dashed-line">
        <li class="line-i"></li>
        <li class="line-i"></li>
        <li class="line-i"></li>
        <li class="line-i"></li>
      </ul>
      <div class="card-theme-bg">
       <img src="~images/watermark/water_mark_leave.png" />
      </div>
      <div class="handler-even-desc">待审批</div>
      <!-- 底部 按钮 -->
      <div class="submit-btn">
        <div class="sub-left-btn" @click="clickDismissed({status: '3', staff_id: item.staff_id, leave_id: item.id})">驳回</div>
        <div class="sub-right-btn" @click="clickDismissed({status:'2', staff_id: item.staff_id, leave_id: item.id})">批准</div>
      </div>
    </div>
    <!-- 无数据 -->
    <div class="no-data-bg" v-show="tableData.length < 1">
      <van-empty description="暂无数据" />
    </div>
  </div>
</template>
<script>
export default {
  props: {
    tableData: {
      type: Array,
      default:()=>[],
    },
  },
  methods: {
    clickDismissed(value) {
      this.$emit('handlerApproval',value)
    },
  },
}
</script>
<style lang="scss" scoped>
@import "~styles/default/appli_card.scss";
</style>